<template>
  <el-row class="login-bg"
          type="flex"
          justify="center"
          align="middle"
          v-auto-height>
    <div class="login_box"
         @keyup.13="login">
      <div class="login_title"
           v-html="text_container"></div>
      <div class="login-input">
        <p class="phone_login">
          <i class="el-icon-erp-shouji"></i>
          <span @click="phone_login">短信快捷登录</span>
        </p>
        <el-form class="login"
                 ref="loginForm"
                 :model="login_data"
                 label-width="0px">
          <mk-form-item prop="username"
                        mk-label="手机号码/用户名"
                        required>
            <el-input class="yhm"
                      placeholder="手机号码/用户名"
                      v-model="login_data.username"
                      v-focus>
              <i slot="prefix"
                 class="el-icon-erp-yonghuming"></i>
            </el-input>
          </mk-form-item>
          <mk-form-item prop="password"
                        mk-label="密码"
                        required>
            <el-input class="mm"
                      type="password"
                      placeholder="密码"
                      v-model="login_data.password">
              <i slot="prefix"
                 class="el-icon-erp-mima"></i>
            </el-input>
          </mk-form-item>
          <mk-form-item prop="code"
                        mk-label="验证码"
                        required>
            <el-col :span="12">
              <el-input class="yzm"
                        placeholder="验证码"
                        v-model="login_data.code" />
            </el-col>
            <el-col :span="12">
              <span class="yzm_span"><img v-cursor
                     :src="ui.code_src"
                     @click="change_code"
                     ref="codeImg" /></span>
            </el-col>
          </mk-form-item>
        </el-form>
        <el-button :loading="ui.loging"
                   type="primary"
                   class="denglu"
                   @click="login">登录</el-button>
        <strong class="forget">
          <span @click="forget_password">忘记密码</span>
        </strong>
      </div>
    </div>
  </el-row>
</template>
<script>
import loginBase from './login-base'

export default {
  mixins: [loginBase],
  data () {
    return {
      text_container: '登录姿肽美账号',
      login_data: {
        username: null,
        password: null,
        code: null
      },
      ui: {
        loging: false, // 登录
        code_src: '',
        formLabelWidth: '150px',
        isCharge: false
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      let fn = this.$refs.loginForm.validate
      let nodejs = false
      this.validate = this.$promise({ fn, nodejs })
    })
  },
  methods: {
    register_login () {
      this.$router.replace('/reg')
    },
    phone_login () {
      this.$router.replace('/phone_loging')
    },
    forget_password () {
      this.$router.replace('/forget_password')
    },
    async validForm () {
      return await this.validate()
    },
    async getUser () {
      return await this.$post('loginBase.json', {
        username: this.login_data.username,
        password: this.login_data.password,
        code: this.login_data.code,
        index: this.codeIndex
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.login-bg {
  background: url(~assets/images/loginbg.png) no-repeat;
  background-size: 100% 100%;
  .login_box {
    width: 396px;
    height: auto;
    background: #fff;
    box-shadow: 0px 1px 15px 10px #eee;
    border-radius: 4px;
    background-size: 100% 100%;
    padding-bottom: 20px;
    .login_title {
      height: 60px;
      line-height: 60px;
      font-size: 20px;
      color: rgba(146, 158, 170, 1);
      text-align: center;
      background: rgba(245, 248, 248, 1);
      margin-bottom: 15px;
    }
    .login-input {
      width: 245px;
      margin: 0 auto;
      .phone_login {
        margin: 0px;
        text-align: right;
        font-size: 14px;
        color: rgba(146, 158, 170, 1);

        span {
          display: inline-block;
          width: auto;
          height: auto;
          padding: 0px;
          position: relative;
          top: 5px;
          cursor: pointer;
        }
        i {
          font-size: 21px;
          margin-right: 5px;
          vertical-align: middle;
          cursor: pointer;
          color: #00a3ef;
          position: relative;
          top: 1px;
        }
      }
      .forget {
        display: block;
        width: 100%;
        font-size: 13px;
        color: #929eaa;
        font-weight: normal;
        overflow: hidden;
        height: auto;
        span {
          position: relative;
          top: 0px;
          cursor: pointer;
          &:first-child {
            width: auto;
            height: auto;
            float: left;
            &:hover {
              border-bottom: 1px solid #00a3ef;
              color: #00a3ef;
            }
          }
          &:last-child {
            width: auto;
            height: auto;
            float: right;
          }
        }
      }
      .login {
        .mk-form-item {
          /deep/ .el-form-item__content {
            position: relative;
            .login_icon {
              position: absolute;
              bottom: -2%;
              left: 5px;
              z-index: 9;
              color: rgba(146, 158, 170, 1);
            }
            .el-input {
              margin-top: 13px;
              height: 35px;
              .el-input__inner {
                height: 35px;
                padding-left: 31px;
              }
              &:first-child {
                margin-top: 0px;
              }
              &:nth-child(3) {
                width: 50%;
              }
            }
            .yzm {
              width: 50%;
              float: left;
              width: 50%;
              margin-top: 20px;
              line-height: 31px;
              .el-input__inner {
                margin-top: 20px;
                padding-left: 10px;
              }
            }
            .yzm_span {
              float: left;
              width: 47%;
              height: 34px;
              margin-top: 20px;
              margin-left: 6px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            /deep/.el-form-item__error {
              top: 102%;
            }
          }
        }
      }
      .denglu {
        width: 100%;
        margin-top: 17px;
      }
      .forget {
        margin-top: 5px;
        font-size: 12px;
      }
    }
  }
}
</style>
